<div id="navigation">
    <button mat-button routerLink="/">
        <mat-icon>home</mat-icon> Playlists
    </button>

    <mat-button-toggle-group
        *ngIf="showCategories"
        name="contentType"
        aria-label="Content Type"
        [value]="contentType"
        (change)="changeContentType($event.value)"
    >
        <mat-button-toggle
            *ngFor="
                let item of contentTypeNavigationItems;
                trackBy: trackByValue
            "
            [value]="item.contentType"
        >
            {{ item.label }}
        </mat-button-toggle>
    </mat-button-toggle-group>

    <button mat-button (click)="favoritesClicked.emit()">
        <mat-icon>star</mat-icon> Favorites
    </button>
</div>
<div id="sub-panel">
    <div class="breadcrumbs">
        <div
            *ngFor="let item of breadcrumbs; let i = index"
            (click)="processBreadcrumbClick(item)"
        >
            <span>{{ item.title }}</span>
            <mat-icon *ngIf="i !== breadcrumbs.length - 1"
                >chevron_right</mat-icon
            >
        </div>
    </div>
    <div class="search" *ngIf="searchVisible">
        <input
            class="search-input"
            placeholder="Search by name"
            type="search"
            [ngModel]="searchPhrase()"
            (ngModelChange)="searchPhraseUpdate.next($event)"
        />
    </div>
</div>
